  <template>
  <div>
    <form action="/">
      <van-search
        v-model.trim="value"
        show-action
        placeholder="商品搜索"
        @search="onSearch"
        @input="iptEvents"
        @cancel="onCancel"
      />
    </form>

    <div class="default" v-if="current == 'default'">
      <div class="lishi">
        <p>历史纪录 <van-icon name="delete-o" /></p>

        <ul>
          <li v-for="item in historyData" :key="item.id">
            {{ item.keyword }}
          </li>
        </ul>
      </div>
      <div class="box">
        <p>热门搜索</p>
        <ul class="hot">
          <li v-for="(item, index) in list" :key="index">
            {{ item.keyword }}
          </li>
        </ul>
      </div>
    </div>

    <div class="list" v-else-if="current == 'list'">
      <ul v-if="this.keywords.length != 0">
        <li
          v-for="item in keywords"
          :key="item.id"
          @click="searchGoods(item.name)"
        >
          {{ item.name }}
        </li>
      </ul>
      <div v-else style="margin-top: 80px">数据库暂无此类商品...</div>
    </div>

    <div class="goods" v-else>
      商品页面
      <ul>
        <li v-for="item in goodsList" :key="item.id">
          <img :src="item.list_pic_url" alt="" width="150px" height="150px" />
          <div class="text">
            <p>{{ item.name }}</p>
            <p>¥{{ item.retail_price }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { indexaction, helperaction, addhistoryaction } from "@/api/home/search";
export default {
  data() {
    return {
      value: "",
      historyData: [],
      list: [],
      current: "default",
      keywords: [],
      goodsList: [],
    };
  },
  computed: {},
  watch: {
    value() {
      if (this.value.length == 0) {
        this.init();
      }
    },
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    onSearch(val) {
      console.log(val);
    },

    init() {
      indexaction({
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        this.historyData = res.data.historyData;
        this.list = res.data.hotKeywordList;
      });
    },
    iptEvents() {
      if (this.value.length == 0) {
        this.current = "default";
        return;
      }
      this.current = "list";
      helperaction({
        keyword: this.value,
        order: "",
      }).then((res) => {
        console.log(res);
        this.keywords = res.data.keywords;
      });
    },

    searchGoods(val) {
      this.current = "goods";
      helperaction({
        keyword: val,
        order: "",
      }).then((res) => {
        console.log(res);
        this.goodsList = res.data.keywords;
      });

      addhistoryaction({
        keyword: val,
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
      });
    },
    onCancel() {
      console.log("取消");
    },
  },
};
</script>

<style scoped lang='scss'>
.lishi,
.box {
  padding: 0 12px;
}
.box {
  margin-top: 6px;
  .hot li:first-child {
    color: red;
    border: 1px solid red;
  }
}
p {
  width: fit-content;

  margin-left: 4px;
  .van-icon {
    float: right;
    margin-left: 240px;
    font-size: 18px;
  }
}
ul {
  display: flex;
  flex-wrap: wrap;
  li {
    padding: 0.13333rem 0.13333rem;
    margin: 0 0.4rem 0.26667rem 0;
    border: 0.01333rem solid #999;
    border-radius: 4px;
  }
}

.list {
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 100%;
      text-indent: 12px;
      text-align: left;
      flex-direction: column;
      border: none;
    }
  }
}

.goods {
  .text P:nth-child(2) {
    width: fit-content;
    margin: 0 auto;
    text-align: center;
    font-size: 0.4rem;
    color: #b4282d;
  }
}
</style>
